<!DOCTYPE html>
<html lang="cn">
<head>
	<title>结算页面</title>
	<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
	<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
	<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
	<script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
	<style>
		body {
			font-size: 12px;
			font-family: Arial;
		}
		
		.redColor {
			color: #C40000 !important;
		}
		
		nav.top {
			background-color: #f2f2f2;
			padding-top: 5px;
			padding-bottom: 5px;
			border-bottom: 1px solid #e7e7e7;
		}
		
		nav.top span, nav.top a {
			color: #999999;
			margin: 0px 10px 0px 10px;
		}
		
		nav.top a:hover {
			color: #C40000;
			text-decoration: none;
		}
		
		.simpleSearchDiv {
			background-color: #C40000;
			margin: 10px 20px 40px 0;
			width: 300px;
			height: 40px;
			display: block;
			padding: 1px;
		}
		
		.simpleSearchDiv input {
			width: 225px;
			height: 34px;
			margin: 2px;
			border: 1px solid transparent;
			outline: none;
			padding-left: 10px;
		}
		
		.simpleSearchDiv button {
			width: 60px;
			background-color: #C40000;
			font-size: 14px;
			color: white;
			border: 1px solid transparent;
			vertical-align: middle;
			outline: none;
		}
		
		img.simpleLogo {
			position: absolute;
			top: 50px;
			left: 10px;
			width: 140px;
		}
		
		.searchBelow {
			margin-top: 3px;
			margin-left: -20px;
		}
		
		.searchBelow span {
			color: #999999;
		}
		
		.searchBelow a {
			padding: 0 20px 0 20px;
			font-size: 14px;
		}
		
		a {
			color: #999999;
		}
		
		a:hover {
			color: #C40000;
			text-decoration: none;
		}
		
		.searchDiv {
			background-color: #C40000;
			width: 400px;
			height: 40px;
			padding: 1px;
			display: block;
			margin: 50px auto;
		}
		
		.searchDiv input {
			width: 275px;
			height: 36px;
			margin: 1px;
			border: 1px solid transparent;
			outline: none;
			padding-left: 10px;
		}
		
		.searchDiv button {
			width: 110px;
			border: 1px solid transparent;
			background-color: #C40000;
			outline: none;
			color: white;
			font-size: 20px;
			font-weight: bold;
			vertical-align: middle;
		}
		
		.searchBelow {
			margin-top: 3px;
			margin-left: -20px;
		}
		
		.searchBelow span {
			color: #999999;
		}
		
		.searchBelow a {
			padding: 0 20px 0 20px;
			font-size: 14px;
		}
		
		img.logo {
			position: absolute;
			left: 0px;
			top: 30px;
			z-index: -1;
		}
		
		div.footer {
			margin: 0px 0px;
			border-top: 1px solid #e7e7e7;
		}
		
		div.footer_ensure {
			margin: 24px 0 24px 0;
			text-align: center;
		}
		
		div.footer_desc {
			border-top: 1px solid #e7e7e7;
			margin: 0px 20px;
			padding-top: 30px;
		}
		
		div.footer_desc div.descColumn {
			width: 20%;
			float: left;
			padding-left: 15px;
		}
		
		div.footer_desc div.descColumn span.descColumnTitle {
			color: #646464;
			font-weight: bold;
			font-size: 16px;
		}
		
		div.footer_desc a {
			display: block;
			padding-top: 3px;
		}
		
		div.copyright {
			background-color: #000000;
			border-top: 2px solid #C40000;
		}
		
		div.copyright span.slash {
			color: #ffffff;
		}
		
		div.footer div.copyright div.white_link a {
			color: #ffffff;
			padding: 0px 5px;
		}
		
		div.footer div.copyright div.white_link {
			padding: 10px 0px;
			margin-left: 10px;
		}
		
		div.license {
			margin-left: 10px;
			padding-bottom: 30px;
		}
		
		div.license span {
			color: #A4A4A4;
		}
		
		div.license div.copyRightYear {
			margin: 10px 0;
			color: #686868;
		}
		
		img.cateye {
			margin-left: 20px;
		}
		
		div.buyPageDiv {
			margin: 20px auto;
			max-width: 1013px;
		}
		
		div.addressTip, div.productListTip {
			color: #333333;
			font-size: 16px;
			font-weight: bold;
			text-align: left;
			margin-bottom: 30px;
		}
		
		table.productListTable {
			width: 100%;
			border-collapse: collapse;
			font-size: 12px;
		}
		
		table.productListTable th {
			color: #999999;
			font-family: 宋体;
			font-weight: normal;
			font-size: 12px;
			text-align: center;
			padding-bottom: 5px;
		}
		
		table.productListTable tr.rowborder td {
			background-color: #B2D1FF;
			border-right: 2px solid #FFFFFF;
			height: 3px;
		}
		
		th.productListTableFirstColumn {
			text-align: left !important;
		}
		
		img.tmallbuy {
			width: 15px;
		}
		
		a.marketLink {
			color: black;
			font-size: 12px;
			font-family: 宋体;
			font-weight: normal;
		}
		
		a.marketLink:hover {
			color: black;
			font-size: 12px;
			text-decoration: none;
			font-family: 宋体;
			font-weight: normal;
		}
		
		span.wangwangGif {
			display: inline-block;
			width: 25px;
			height: 25px;
			background-image: url("https://how2j.cn/tmall/img/site/wangwang.gif");
			background-repeat: no-repeat;
			background-color: transparent;
			background-attachment: scroll;
			background-position: -83px -0px;
			position: relative;
			top: 8px;
			left: 2px;
		}
		
		tbody.productListTableTbody td {
			text-align: center;
		}
		
		tbody.productListTableTbody td.orderItemFirstTD {
			text-align: left;
		}
		
		tr.orderItemTR td {
			border-bottom: 1px solid #E5E5E5;
			padding: 10px 0;
		}
		
		img.orderItemImg {
			width: 50px;
			height: 50px;
			border: 1px solid #E9E9E9;
		}
		
		td.orderItemProductInfo {
			text-align: left !important;
		}
		
		td.orderItemProductInfo img {
			height: 16px;
		}
		
		a.orderItemProductLink {
			color: #666666;
			display: block;
		}
		
		a.orderItemProductLink:hover {
			color: #666666;
			text-decoration: underline;
		}
		
		span.orderItemProductPrice, span.orderItemProductNumber {
			color: #000000;
		}
		
		span.orderItemUnitSum {
			color: #CC0000;
			font-weight: bold;
		}
		
		td.orderItemFirstTD, td.orderItemLastTD {
			border-bottom: 0px solid black !important;
		}
		
		label.orderItemDeliveryLabel {
			color: #666666;
			font-family: 宋体;
			font-size: 12px;
			font-weight: normal;
		}
		
		select.orderItemDeliverySelect {
			width: 100px;
			height: 23px;
		}
		
		div.orderItemSumDiv {
			background-color: #F2F6FF;
			padding: 20px;
			border-top: 2px solid #B4D0FF;
			height: 50px;
		}
		
		div.orderItemSumDiv span {
			color: #999999;
		}
		
		span.leaveMessageText {
			display: inline-block;
			margin-right: 10px;
			float: left;
		}
		
		div.orderItemTotalSumDiv {
			margin: 40px;
			height: 40px;
		}
		
		div.submitOrderDiv {
			height: 40px;
			margin: 20px 0;
		}
		
		div.orderItemTotalSumDiv span {
			color: #999999;
		}
		
		span.orderItemTotalSumSpan {
			color: #C40000 !important;
			font-size: 22px;
			font-weight: bold;
			border-bottom: 1px dotted #F2F6FF;
		}
		
		button.submitOrderButton {
			border: 1px solid #C40000;
			background-color: #C40000;
			text-align: center;
			line-height: 40px;
			font-size: 14px;
			font-weight: bold;
			color: white;
			float: right;
			display: inline-block;
			margin: 0 10px;
			width: 180px;
			height: 40px;
		}
		
		div.buyPageDiv {
			margin: 20px auto;
		}
		
		div.address {
			margin: 20px 5px;
			text-align: left;
		}
		
		div.addressTip, div.productListTip {
			color: #333333;
			font-size: 16px;
			font-weight: bold;
			text-align: left;
			margin-bottom: 30px;
		}
		
		table.addressTable {
			margin: 20px 20px;
			width: 600px;
		}
		
		table.addressTable td.firstColumn {
			width: 100px;
		}
		
		table.addressTable td {
			 color: #333333;
			 vertical-align: top;
			 padding-right: 5px;
			 text-align: left;
			 height: 30px;
			 font-size:12px;
		 }
		
		table.addressTable td textarea {
			border: 1px solid #AFAFAF;
			margin-bottom: 10px;
			width: 400px;
		}
		
		table.addressTable td input {
			border: 1px solid #AFAFAF;
			width: 200px;
		}
		
		span.redStar {
			color: red;
			font-size: 8px;
		}
	</style>
	
</head>
<body>
	<nav class="top ">
		<a href="index.html?ReturnUrl=./Settlement.html">
			<span class="glyphicon glyphicon-home redColor"></span>
			天猫首页
		</a>

		<span>喵，欢迎来到天猫</span>
		<a href="login.html?ReturnUrl=./Settlement.html">请登录</a>
		<a href="register.html?ReturnUrl=./Settlement.html">免费注册</a>

		<span class="pull-right">
			<a href="order.html?ReturnUrl=./Settlement.html">我的订单</a>
			<a href="car.html?ReturnUrl=./Settlement.html">
				<span class="glyphicon glyphicon-shopping-cart redColor"></span>
				购物车<storage>0</storage>件
			</a>
		</span>
	
	</nav>
	
	<div class="buyPageDiv">
		<form method="post">
			<div class="buyFlow">
				<img class="pull-left" src="http://how2j.cn/tmall/img/site/simpleLogo.png">
				<img class="pull-right" src="http://how2j.cn/tmall/img/site/buyflow.png">
				<div style="clear:both"></div>
			</div>
			<div class="address">
				<div class="addressTip">输入收货地址</div>
				<div>
					<table class="addressTable">
						<tr>
							<td class="firstColumn">详细地址<span class="redStar">*</span></td>
							
							<td><textarea name="address" class="useddress" placeholder="建议您如实填写详细收货地址，例如接到名称，门牌好吗，楼层和房间号等信息"></textarea>
							</td>
						</tr>
						<tr>
							<td>邮政编码</td>
							<td><input name="post" class="usepost" placeholder="如果您不清楚邮递区号，请填写000000" type="text"></td>
						</tr>
						<tr>
							<td>收货人姓名<span class="redStar">*</span></td>
							<td><input name="receiver" class="usename" placeholder="长度不超过25个字符" type="text"></td>
						</tr>
						<tr>
							<td>手机号码 <span class="redStar">*</span></td>
							<td><input name="mobile" class="usemobile" placeholder="请输入11位手机号码" type="text"></td>
						</tr>
					</table>
				</div>
			</div>
			<div class="productList">
				<div class="productListTip">确认订单信息</div>
				<table class="productListTable">
					<thead>
						<tr>
							<th class="productListTableFirstColumn" colspan="2">
								<img class="tmallbuy" src="http://how2j.cn/tmall/img/site/tmallbuy.png">
								<a class="marketLink" href="#nowhere">店铺：天猫店铺</a>
								<a class="wangwanglink" href="#nowhere"> <span class="wangwangGif"></span> </a>
							</th>
							<th>单价</th>
							<th>数量</th>
							<th>小计</th>
							<th>配送方式</th>
						</tr>
						<tr class="rowborder">
							<td colspan="2"></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
						</tr>
					</thead>
					<tbody class="productListTableTbody">
						<!-- <tr class="orderItemTR">
							<td class="orderItemFirstTD"><img class="orderItemImg"
							src="http://how2j.cn/tmall/img/productSingle_middle/3752.jpg">
							</td>
							<td class="orderItemProductInfo">
								<a class="orderItemProductLink" href="#nowhere">
									洁霸BF522多功能洗地机刷地机酒店家用地毯清洗机 擦地机抛光机
								</a>
								<img src="http://how2j.cn/tmall/img/site/creditcard.png" title="支持信用卡支付">
								<img src="http://how2j.cn/tmall/img/site/7day.png" title="消费者保障服务,承诺7天退货">
								<img src="http://how2j.cn/tmall/img/site/promise.png" title="消费者保障服务,承诺如实描述">
							</td>
							<td>
								<span class="orderItemProductPrice">￥1,235.00</span>
							</td>
							<td>
								<span class="orderItemProductNumber">4</span>
							</td>
							<td><span class="orderItemUnitSum">
						￥4,940.00
						</span></td>
							<td class="orderItemLastTD" rowspan="5">
								<label class="orderItemDeliveryLabel">
									<input checked="checked" type="radio" value="">
									普通配送
								</label>
								<select class="orderItemDeliverySelect" class="form-control">
									<option>快递 免邮费</option>
								</select>
							</td>
						</tr>
						<tr class="orderItemTR">
							<td class="orderItemFirstTD"><img class="orderItemImg"
							src="http://how2j.cn/tmall/img/productSingle_middle/3182.jpg">
							</td>
							<td class="orderItemProductInfo">
								<a class="orderItemProductLink" href="#nowhere">
									两轮平衡车双轮儿童思维漂移电动扭扭车智能滑板车成人体感代步车
								</a>
								
								<img src="http://how2j.cn/tmall/img/site/creditcard.png" title="支持信用卡支付">
								<img src="http://how2j.cn/tmall/img/site/7day.png" title="消费者保障服务,承诺7天退货">
								<img src="http://how2j.cn/tmall/img/site/promise.png" title="消费者保障服务,承诺如实描述">
							</td>
							<td>
								<span class="orderItemProductPrice">￥755.65</span>
							</td>
							<td>
								<span class="orderItemProductNumber">1</span>
							</td>
							<td><span class="orderItemUnitSum">
						￥755.65
						</span></td>
						</tr>
						<tr class="orderItemTR">
							<td class="orderItemFirstTD"><img class="orderItemImg"
						src="http://how2j.cn/tmall/img/productSingle_middle/1917.jpg">
							</td>
							<td class="orderItemProductInfo">
								<a class="orderItemProductLink" href="#nowhere">
									依然美佳欧式布艺沙发组合可拆洗新款实木雕花大户型奢华别墅家具
								</a>
								<img src="http://how2j.cn/tmall/img/site/creditcard.png" title="支持信用卡支付">
								<img src="http://how2j.cn/tmall/img/site/7day.png" title="消费者保障服务,承诺7天退货">
								<img src="http://how2j.cn/tmall/img/site/promise.png" title="消费者保障服务,承诺如实描述">
							</td>
							<td>
								<span class="orderItemProductPrice">￥7,008.40</span>
							</td>
							<td>
								<span class="orderItemProductNumber">1</span>
							</td>
							<td><span class="orderItemUnitSum">
						￥7,008.40
						</span></td>
						</tr> -->
					</tbody>
				</table>
				<div class="orderItemSumDiv">
					<div class="pull-left">
						<span class="leaveMessageText">给卖家留言:</span>
						<span>
					<img class="leaveMessageImg" src="http://how2j.cn/tmall/img/site/leaveMessage.png">
				</span>
						<span class="leaveMessageTextareaSpan" style="display: none;">
					<textarea class="leaveMessageTextarea" name="userMessage"></textarea>
					<div>
						<span>还可以输入200个字符</span>
					</div>
				</span>
					</div>
					<span class="pull-right">店铺合计(含运费): ￥12,704.05</span>
				</div>
			</div>
			<div class="orderItemTotalSumDiv">
				<div class="pull-right">
					<span>实付款：</span>
					<span class="orderItemTotalSumSpan">￥12,704.05</span>
				</div>
			</div>
			<div class="submitOrderDiv">
				<button class="submitOrderButton" type="button">提交订单</button>
			</div>
		</form>
	</div>
	
	<div class="modal " id="loginModal" role="dialog" tabindex="-1">
		<div class="modal-dialog loginDivInProductPageModalDiv">
			<div class="modal-content">
				<div class="loginDivInProductPage">
					<div class="loginErrorMessageDiv">
						<div class="alert alert-danger">
							<button aria-label="Close" class="close" data-dismiss="alert" type="button"></button>
							<span class="errorMessage"></span>
						</div>
					</div>
					
					<div class="login_acount_text">账户登录</div>
					<div class="loginInput ">
							<span class="loginInputIcon ">
								<span class=" glyphicon glyphicon-user"></span>
							</span>
						<input id="name" name="name" placeholder="手机/会员名/邮箱" type="text">
					</div>
					
					<div class="loginInput ">
							<span class="loginInputIcon ">
								<span class=" glyphicon glyphicon-lock"></span>
							</span>
						<input id="password" name="password" placeholder="密码" type="password" type="text">
					</div>
					<span class="text-danger">不要输入真实的天猫账号密码</span><br><br>
					<div>
						<a href="#nowhere">忘记登录密码</a>
						<a class="pull-right" href="#nowhere">免费注册</a>
					</div>
					<div style="margin-top:20px">
						<button class="btn btn-block redButton loginSubmitButton" type="button">登录</button>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="modal" id="deleteConfirmModal" role="dialog" tabindex="-1">
		<div class="modal-dialog deleteConfirmModalDiv">
			<div class="modal-content">
				<div class="modal-header">
					<button class="close" data-dismiss="modal" type="button"><span aria-hidden="true">×</span><span
							class="sr-only">Close</span></button>
					<h4 class="modal-title">确认删除？</h4>
				</div>
				<div class="modal-footer">
					<button class="btn btn-default" data-dismiss="modal" type="button">关闭</button>
					<button class="btn btn-primary deleteConfirmButton" id="submit" type="button">确认</button>
				</div>
			</div>
		</div>
	</div>
	
	<div class="footer" id="footer" style="display: block;">
		<div class="footer_ensure" id="footer_ensure">
			<a href="#nowhere">
				<img src="https://how2j.cn/tmall/img/site/ensure.png">
			</a>
		</div>
		<div class="footer_desc" id="footer_desc">
			<div class="descColumn">
				<span class="descColumnTitle">购物指南</span>
				<a href="#nowhere">免费注册</a>
				<a href="#nowhere">开通支付宝</a>
				<a href="#nowhere">支付宝充值</a>
			</div>
			<div class="descColumn">
				<span class="descColumnTitle">天猫保障</span>
				<a href="#nowhere">发票保障</a>
				<a href="#nowhere">售后规则</a>
				<a href="#nowhere">缺货赔付</a>
			</div>
			<div class="descColumn">
				<span class="descColumnTitle">支付方式</span>
				<a href="#nowhere">快捷支付</a>
				<a href="#nowhere">信用卡</a>
				<a href="#nowhere">蚂蚁花呗</a>
				<a href="#nowhere">货到付款</a>
			</div>
			<div class="descColumn">
				<span class="descColumnTitle">商家服务</span>
				<a href="#nowhere">商家入驻</a>
				<a href="#nowhere">商家中心</a>
				<a href="#nowhere">天猫智库</a>
				<a href="#nowhere">天猫规则</a>
				<a href="#nowhere">物流服务</a>
				<a href="#nowhere">喵言喵语</a>
				<a href="#nowhere">运营服务</a>
			</div>
			<div class="descColumn">
				<span class="descColumnTitle">手机天猫</span>
				<a href="#nowhere"><img src="https://how2j.cn/tmall/img/site/ma.png"></a>
			</div>
		</div>
		<div style="clear:both"></div>
		
		<img class="cateye" id="cateye" src="https://how2j.cn/tmall/img/site/cateye.png">
		<div class="copyright" id="copyright">
			<div class="white_link">
				<a href="#nowhere">关于天猫</a>
				<a href="#nowhere"> 帮助中心</a>
				<a href="#nowhere">开放平台</a>
				<a href="#nowhere"> 诚聘英才</a>
				<a href="#nowhere">联系我们</a>
				<a href="#nowhere">网站合作</a>
				<a href="#nowhere">法律声明</a>
				<a href="#nowhere">知识产权</a>
				<a href="#nowhere"> 廉正举报 </a>
			</div>
			<div class="white_link">
				<a href="#nowhere"> 阿里巴巴集团</a><span class="slash">|</span>
				<a href="#nowhere"> 淘宝网</a><span class="slash">|</span>
				<a href="#nowhere">天猫 </a><span class="slash">|</span>
				<a href="#nowhere"> 聚划算</a><span class="slash">|</span>
				<a href="#nowhere">全球速卖通</a><span class="slash">|</span>
				<a href="#nowhere">阿里巴巴国际交易市场</a><span class="slash">|</span>
				<a href="#nowhere">1688</a><span class="slash">|</span>
				<a href="#nowhere">阿里妈妈</a><span class="slash">|</span>
				<a href="#nowhere"> 阿里旅行·去啊 </a><span class="slash">|</span>
				<a href="#nowhere"> 阿里云计算 </a><span class="slash">|</span>
				<a href="#nowhere"> 阿里通信 </a><span class="slash">|</span>
				<a href="#nowhere"> YunOS </a><span class="slash">|</span>
				<a href="#nowhere"> 阿里旅行·去啊 </a><span class="slash">|</span>
				<a href="#nowhere"> 万网 </a><span class="slash">|</span>
				<a href="#nowhere"> 高德 </a><span class="slash">|</span>
				<a href="#nowhere"> 优视 </a><span class="slash">|</span>
				<a href="#nowhere"> 友盟 </a><span class="slash">|</span>
				<a href="#nowhere"> 虾米 </a><span class="slash">|</span>
				<a href="#nowhere"> 天天动听 </a><span class="slash">|</span>
				<a href="#nowhere"> 来往 </a><span class="slash">|</span>
				<a href="#nowhere"> 钉钉 </a><span class="slash">|</span>
				<a href="#nowhere"> 支付宝 </a>
			</div>
			<div class="license">
				<span>增值电信业务经营许可证： 浙B2-20110446</span>
				<span>网络文化经营许可证：浙网文[2015]0295-065号</span>
				<span>互联网医疗保健信息服务 审核同意书 浙卫网审【2014】6号 </span>
				<span>互联网药品信息服务资质证书编号：浙-（经营性）-2012-0005</span>
				<div class="copyRightYear">© 2003-2016 TMALL.COM 版权所有</div>
				<div>
					<img src="https://how2j.cn/tmall/img/site/copyRight1.jpg">
					<img src="https://how2j.cn/tmall/img/site/copyRight2.jpg">
				</div>
			</div>
		</div>
	</div>
	<script src="lib/jquery-2.2.4.js"></script>
	<script src="./js/axios.js"></script>
	<script src="js/settlement.js"></script>
</body>
</html>